<template>
    <van-popup v-model="isShow" position="bottom" @click-overlay="cancel">
        <van-picker
                show-toolbar
                title="请选择城市"
                value-key="name"
                :columns="areaList"
                @change="areaChange"
                @cancel="cancel"
                @confirm="confirm"
        />
    </van-popup>
</template>

<script>
    export default {
        name: "vAddcity",
        props: {
            show: Boolean,
        },
        data(){
            return{
                isShow: false,
                areaList: [{values: []}, {values: []}],
                // areaList: [{values: []}, {values: []}, {values: []}],
            }
        },
        watch:{
            show(bool){
                this.isShow = bool;
            }
        },
        created() {
          this.isShow = this.show;
            this.getArea({},-1);
        },
        methods: {
          // 
            //网络请求地区数据
            async getArea(params, index) {
                const res = await  this.$http.get('/area/getChildren',{params});
                if(index === 1)return ;
                this.areaList[index+1].values = [];
                this.areaList[index+1].values.push({id: undefined, name: '请选择'});
                res.data.forEach(item => {
                    this.areaList[index+1].values.push({
                        id: item.id,
                        name: item.name
                    })
                });
            },


            //地区改变
            areaChange(val, values, index){
                switch (index) {
                    case 0: this.getArea({id: values[index].id,type:1},index);break;
                    case 1: this.getArea({id: values[index].id},index);break;
                    case 2: this.getArea({id: values[index].id},index);break;
                }

            },

            confirm(area){
                try {
                    let areas = area.map(item => item.id).filter(i => i);
                    if(areas.length < 2) return this.$toast.error('请选择城市');
                    this.$emit('confirm',area);
                }catch (e) {
                    this.$toast.error('请选择城市');
                }
            },
            cancel1(){
                console.log('取消1');
            },
            cancel(){
                console.log('取消');
                this.$emit('cancel');
            }
        }
    }
</script>
